<template>
    <div class="content_base">
      <div class='fun'>
          <el-form ref="form" label-width="120px">
               <el-form-item label="选择月份：">
                  <el-date-picker
                    v-model="seleform.releaseDate"
                    type="month"
                    placeholder="默认本月"
                    class="timeByM"
                    value-format="yyyyMM"
                    @change='getData'
                   >
                  </el-date-picker>
                </el-form-item>
                <el-form-item v-if="userLevel==3">
                  <el-upload
                  class="upload-demo"
                  :action="addressurl"
                  :on-success="succNotice"
                   multiple
                  :with-credentials="true"
                  :limit="1"
                  :on-exceed="handleExceed">
                  <el-button size="small" type="primary">发布文件</el-button>
                   </el-upload>
                </el-form-item>
          </el-form>
      </div>
      <div class='table'>
       <el-table
         :data="tableData"
         stripe
         style="width: 100%">
         <el-table-column
           label="文件名">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click='downLoad(scope.row)'
                >{{scope.row.fileName}}</el-button>
            </template>
         </el-table-column>
         <el-table-column
           prop="uploadTime"
           label="发布时间">
         </el-table-column>
       </el-table>
       </div>
       <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="seleform.currentPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="seleform.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
      </div>
      <el-footer class="footer">Copyright&nbsp;2018江西省水利科学研究院|江西鄱水信息科技有限公司</el-footer>
    </div>
</template>
<script>
export default {
    data(){
        return{
            //选择数据----包括分页和时间
            seleform:{
                releaseDate:'',
                currentPage:1,
                pageSize:10
            },
            textform:{
                releaseDate:'',
                currentPage:1,
                pageSize:10
            },
            totalSize:0,
            tableData:[
                {fileName:'关于治理河堤的中央报告',uploadTime:'2018年10月21日',filePath:''},
                {fileName:'关于治理河堤的中央报告',uploadTime:'2018年10月21日',filePath:''},
                {fileName:'关于治理河堤的中央报告',uploadTime:'2018年10月21日',filePath:''},
                {fileName:'关于治理河堤的中央报告',uploadTime:'2018年10月21日',filePath:''}
            ],
            //上传的数据
            addressurl:'',
            userLevel:''
        }
    },
    methods:{
         //文件超出限制
            handleExceed(files, fileList){
              const h = this.$createElement;
                this.$message({
                  message: h('p', null, [
                    h('span', null, '上传提示: '),
                    h('i', { style: 'color: teal' }, '文件超出上传件数，只能上传一个文件')
                  ])
                });
            },
        //上传成功或者失败提示
        succNotice(response,file,fileList){
          var mes = response.responseMessage
          if(mes=='文件上传成功'){
           this.$message({
                message: mes,
                type: 'success'
              });
              //刷新页面
            this.$router.push({name:'emptyPage'})
          }else{
            this.$message({
                message: mes+'请重新上传或联系管理员',
                type: 'warning'
           });
         }
       },
       //获得通告列表
       getData(){
           var _this = this
            var thisDate = (new Date()).getTime()
            this.seleform.thisDate =  thisDate
           this.$axios.get('/noticecontroller/getfilelist',{params:this.seleform}).then(function (res) {
             var codeMes = res.data.responseCode
             if(codeMes=='101'){
                    _this.$router.push({name:'login'})
              }else{
               var data = res.data.responseData
               if(data){
                     _this.tableData = data.dataList
                     _this.totalSize = data.page.totalSize 
                }else{
                    _this.tableData = []
                    _this.totalSize=0
                }
            }
           }).catch(function(err){
               console.log(err);
               
           })
       },
       //下载文件
       downLoad(row){
           var _this = this
           var baseURL = this.$axios.defaults.baseURL
           var urlCode = encodeURI(encodeURI(row.filePath)) 
           var url=baseURL+`/noticecontroller/downloadfile?path=${urlCode}`
           window.open(url,'_self');
       },
      handleSizeChange(val) {
        this.seleform.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val) {
        this.seleform.currentPage = val;
        this.getData();
      }
    },
    created(){
        //上传文件
        this.addressurl =this.$axios.defaults.baseURL+"/noticecontroller/uploadloadfile"
        this.userLevel = window.localStorage.getItem('level')
        this.getData()
    }
}
</script>
<style>
    .cell{
        text-align:center
    }
</style>
<style scoped>
.fun{
    width:80%;
    margin:0px auto;
    padding-top:22px;
    height:78px;
}
.el-form-item{
    width:400px;
    float:left;
}
.table{
    margin:30px
}
.page{
  height:100px;
  margin-top:40px;
  text-align:right;
  padding-right:50px;
}
</style>


